<template>
  <view>
    <u-navbar title="我的学习记录"></u-navbar>
    <view class="record-wrapper">
      <edu-mescroll-body @init="mescrollInit" @down="refresh" @up="reachBottom">
        <view class="record-time-axis">
          <view v-for="subItem in recordList" :key="subItem.title">
            <view class="sub-title" v-if="!$u.test.empty(subItem.title)">
              <text>{{ subItem.title }}</text>
              年
            </view>
            <view v-for="currItem in subItem.list" :key="currItem.title">
              <view class="curr-title">{{ currItem.title }}</view>
              <view
                class="record-time-axis-item"
                @click="onStartLearning(item)"
                :class="index == currItem.list.length - 1 ? '' : 'line'"
                v-for="(item, index) in currItem.list"
                :key="item.id"
              >
                <view class="time">{{ item.update_time | timeFormat('hh:MM') }}</view>
                <view class="node"><view class="dot"></view></view>
                <view class="content">
                  <view class="title u-line-1">{{ item.course_title }}</view>
                  <view class="name u-line-1">{{ item.section_title }}</view>
                  <view
                    class="curr"
                    v-if="item.section_data_type == 3 || item.section_data_type == 4"
                    >总学时:{{ item.total_time | handleTime }}</view
                  >
                  <view class="curr" v-else
                    >学习至 {{ item.current_time | formatSeconds('hh:mm:ss') }}</view
                  >
                </view>
              </view>
            </view>
          </view>
        </view>
      </edu-mescroll-body>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      recordData: [],
      recordList: [],
      directoryItemData: null,
    }
  },
  filters: {
    //处理图文时间
    handleTime(val) {
      if (val < 60) {
        return `${val}秒`
      } else if (val < 3600) {
        let result = parseInt(val)
        let m =
          Math.floor((result / 60) % 60) < 10
            ? '0' + Math.floor((result / 60) % 60)
            : Math.floor((result / 60) % 60)
        let s =
          Math.floor(result % 60) < 10 ? '0' + Math.floor(result % 60) : Math.floor(result % 60)
        return `${m}分${s}秒`
      } else if (val >= 3600) {
        let result = parseInt(val)
        let h =
          Math.floor(result / 3600) < 10
            ? '0' + Math.floor(result / 3600)
            : Math.floor(result / 3600)
        let m =
          Math.floor((result / 60) % 60) < 10
            ? '0' + Math.floor((result / 60) % 60)
            : Math.floor((result / 60) % 60)
        let s =
          Math.floor(result % 60) < 10 ? '0' + Math.floor(result % 60) : Math.floor(result % 60)
        return `${h}小时${m}分${s}秒`
      }
    },
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
  },
  methods: {
    refresh() {
      this.mescroll.resetUpScroll()
    },
    // 页面数据
    reachBottom(page) {
      this.$edu.api
        .getCourseRecordList({
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res

          let date = new Date()
          let currentYear = date.getFullYear()

          data.data.forEach((item, i) => {
            let timeYear = this.$u.timeFormat(item.update_time, 'yyyy')
            let timer = (Number(new Date()) - item.update_time * 1000) / 1000
            let year = ''
            let month = ''
            // 是否等于当前年份
            if (timeYear == currentYear) {
              year = ''
            } else {
              year = this.$u.timeFormat(item.update_time, 'yyyy')
            }

            if (timer < 86400) {
              month = '今天'
            } else if (timer > 86400 && timer < 172800) {
              month = '昨天'
            } else {
              month = this.$u.timeFormat(item.update_time, 'mm月dd日')
            }
            this.$set(item, 'year_time', year)
            this.$set(item, 'month_time', month)
          })

          if (page.num == 1) this.recordData = []
          this.recordData = this.recordData.concat(data.data)
          this.mescroll.endBySize(data.data.length, data.total)

          let list = this.yearLoction(this.recordData)
          list.forEach((subItem, index) => {
            subItem.list = this.monthLoction(subItem.list)
          })
          this.recordList = list
        })
    },
    // 学习
    onStartLearning(item) {
      // 缓存课时的item
      let sectionData = {
        title: item.section_title,
        id: item.section_id,
        course_id: item.course_id,
        is_buy: 1,
        section_rate: {
          current_time: item.current_time,
        },
        section_data: {
          data_type: item.section_data_type,
          stock: item.stock,
          duration: item.section_duration,
        },
      }
      this.directoryItemData = sectionData
      // 点播
      this.handlePath(item)
    },
    // 课程跳转
    handlePath(item) {
      if (item.expire_rest == 0) {
        this.$u.toast('课程已过期')
      } else {
        // 缓存课时的item
        this.$store.commit('course/setCurrentPlayItem', this.directoryItemData)
        this.$u.route('/pageCourse/course/video/index', {
          id: item.course_id,
          sid: item.section_id,
        })
      }
    },
    // 年
    yearLoction(arr) {
      let repeat = {}
      let list = []
      arr.forEach((subItem) => {
        if (!repeat[subItem.year_time]) {
          let listItem = {
            title: subItem.year_time,
            list: [
              {
                ...subItem,
              },
            ],
          }
          list.push(listItem)
          repeat[subItem.year_time] = true
        } else {
          for (let currItem of list) {
            if (currItem.title == subItem.year_time) {
              currItem.list.push(subItem)
            }
          }
        }
      })
      return list
    },
    // 月日
    monthLoction(arr) {
      let repeat = {}
      let list = []
      arr.forEach((subItem) => {
        if (!repeat[subItem.month_time]) {
          let listItem = {
            title: subItem.month_time,
            list: [
              {
                ...subItem,
              },
            ],
          }
          list.push(listItem)
          repeat[subItem.month_time] = true
        } else {
          for (let currItem of list) {
            if (currItem.title == subItem.month_time) {
              currItem.list.push(subItem)
            }
          }
        }
      })
      return list
    },
  },
}
</script>

<style lang="scss" scoped>
.record-wrapper {
  padding: 0 30rpx;
  min-height: calc(100vh - 44px);
  background-color: #fff;
  .record-time-axis {
    padding: 32rpx 0 1rpx;
    .sub-title {
      font-size: 34rpx;
      font-weight: bold;
      color: $edu-main-color;
      margin-bottom: 32rpx;
      text {
        font-size: 48rpx;
      }
    }
    .curr-title {
      font-size: 28rpx;
      font-weight: 400;
      color: $edu-main-color;
      margin-bottom: 20rpx;
    }
    .record-time-axis-item {
      display: flex;
      align-items: flex-start;
      position: relative;
      padding-bottom: 50rpx;
      &.line::before {
        content: ' ';
        position: absolute;
        left: 108rpx;
        top: 12rpx;
        width: 1px;
        bottom: -12rpx;
        border-left: 1px solid #b7bac1;
        transform-origin: 0 0;
        transform: scaleX(0.5);
      }
      .time {
        width: 100rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: $edu-tips-color;
        line-height: 42rpx;
      }
      .node {
        .dot {
          margin-top: 12rpx;
          height: 16rpx;
          width: 16rpx;
          border-radius: 16rpx;
          background: #b7bac1;
        }
      }
      .content {
        margin-left: 28rpx;
        flex: 1;
        max-width: 546rpx;
        .title {
          font-size: 30rpx;
          font-weight: 400;
          color: $edu-main-color;
          line-height: 42rpx;
        }
        .name {
          font-size: 26rpx;
          font-weight: 400;
          color: $edu-tips-color;
          margin-top: 10rpx;
        }
        .curr {
          font-size: 22rpx;
          font-weight: 400;
          color: $edu-tips-color;
          margin-top: 18rpx;
        }
      }
    }
  }
}
</style>
